<template>
    <div class="box" >
        <!-- <div class="sousuokuang">
            <span class="sousuoInput">
                <el-input v-model="input" placeholder="请输入内容" size="30"></el-input>
            </span>

            <span class="sousuoButton">
                <el-button type="primary">搜索</el-button>
            </span>

        </div> -->
        <div class="fenleilan">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="视频" name="first">

                    <div  @click="videoPlay(sp.url, sp.name, sp.point,sp.views,sp.collection,sp.id,sp.size,sp.upId,sp.upName,sp.des,sp.jur, sp.pay, sp.imgUrl)" class="shipin" v-for="(sp,index) in shipin"  :key="index">
                        <a href="">
                            <div class="shipinkuang">
                                <img :src="sp.imgUrl" alt="">
                                <div class="aName">
                                    <a href="" class="title00" v-html="sp.title"></a>
                                </div>

                                <p >{{sp.time}}</p>
                            </div>
                        </a>
                    </div>


                </el-tab-pane>

                <el-tab-pane label="博客" name="second">
                    <div class="body-inner">
                        <div class="blog" v-for="item in blog" :key="item.id" style="position: relative">
                            <a   @click="lookBlog(item.id)" class="title00" style="cursor: pointer; display: inline-block; position: absolute; top: 10px; left: 59px;" v-html="item.title"></a>
                            <img :src="item.imgUrl" height="30" width="30" style="border-radius: 50%; display: inline-block; margin-top: 10px;" />
                            <span style="display: inline-block; position: absolute; left: 60px; top: 40px; width: 400px; "> {{item.text.toString().slice(0, 50)}}</span>
                            <span class="ho" style="display: inline-block; color: #3a8ee6; margin-left: 20px; position: absolute; bottom: 0px; right: 80px;"><img src="../../assets/img/eye.png" height="16" width="16"/><span style="display: inline-block; margin-left: 2px; color: #3a8ee6">{{item.browseNum}}</span></span>
                            <span class="ho" style="display: inline-block; color: #3a8ee6; margin-left: 20px; position: absolute; bottom: 0px; right: 20px;"><span class="el-icon-star-off" style="display: inline-block"></span><span style="display: inline-block; margin-left: 2px; color: #3a8ee6">{{item.upNum}}</span></span>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="论坛" name="third">
                    <div class="inner-bou">
                        <div @click="taolun(item.id, item.imgUrl, item.name, item.des, item.views)" :key="item.id" class="boxtaolun" v-for="item in discuss">
                            <div class="head2" style="position: relative; top: 20px">
                                <img :src="item.imgUrl" height="22" width="22" style="border-radius: 50%"/>
                                <span class="taolunName title00" v-html="item.title"></span>
                            </div>
                            <div class="dec" style="margin-top: 30px">
                                {{item.des}}
                            </div>
                            <div>
                                <span class="taolun"><i class="el-icon-bell"></i>讨论</span>
                                <span class="tuijian">我要上推荐</span>
                            </div>
                        </div>

                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>

</template>

<script>
    import {request} from "../../network/request";
    export default {
        data() {
            return {
                shipin:[],
                blog:[],
                discuss:[],
                input: '',
                activeName: 'first',
            } },
        methods: {
            taolun(id, imgUrl, name, des, views){
                // console.log(id);
                this.$router.push({
                    path:"/taolun",
                    query:{
                        id:id,
                        imgUrl:imgUrl,
                        name:name,
                        des:des,
                        views:views
                    }
                });
                // this.$router.push("/taolun");
            },
            change(url, name, point,views,collection,id,size,upId,upName,des,jur,pay,imgUrl){
                //alert();
                this.$router.push({
                    path:"/videoPlay",
                    query:{
                        url:url,
                        name:name,
                        point:point,
                        views:views,
                        collection:collection,
                        id:id,
                        size:size,
                        upId:upId,
                        upName:upName,
                        des:des,
                        imgUrl:imgUrl
                    }
                });
            },
            videoPlay(url, name, point,views,collection,id,size,upId,upName,des,jur,pay, imgUrl) {

                if (jur == 0) {
                    this.change(url, name, point, views, collection, id, size, upId, upName, des, jur, pay, imgUrl);
                }
                this.videoId = id;
                if (jur == 1) {
                    let vip = sessionStorage.getItem("vip");
                    if (vip == "vip" || vip == "svip") {
                        this.change(url, name, point, views, collection, id, size, upId, upName, des, jur, pay, imgUrl)
                    } else {
                        this.$confirm('你不是vip， 是否要去充值', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/vip");
                        }).catch(() => {

                        });
                    }
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            lookBlog(id){
                request({
                    url:"/searchBlogById",
                    method: "post",
                    params:{
                        id: id
                    }
                }).then(res=>{
                    console.log(res.data);
                    sessionStorage.setItem('blog', res.data.text);
                    sessionStorage.setItem('blogTitle', res.data.title);
                    this.$router.push('/lookBlog');

                }).catch(err=>{
                    console.log(err);
                });
             }
        },
        created(){
            request({
                url:"/searchBlog",
                method: "get",
                params:{
                    keyWord:this.$route.query.keyWord,
                    pageNo: 1,
                    pageSize: 20
                }
            }).then(res=>{
                console.log(res.data);
                this.blog = res.data;

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });

            request({
                url:"/searchDiscuss",
                method: "get",
                params:{
                    keyWord:this.$route.query.keyWord,
                    pageNo: 1,
                    pageSize: 20
                }
            }).then(res=>{
                console.log(res.data);
                this.discuss = res.data;

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });

            request({
                url:"/searchVideo",
                method: "get",
                params:{
                    keyWord:this.$route.query.keyWord,
                    pageNo: 1,
                    pageSize: 20
                }
            }).then(res=>{

                console.log(res.data);
                this.shipin = res.data;

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });



        }
    }

</script>

<style>
    .title00 span{
        display: inline-block !important;
        font-size: 16px !important;
     }
    *{

        margin: 0;
        padding: 0;
    }
    .box{
        width: 1400px;
        margin: 0 auto;
        height: auto;
        background-color: #ffffff;
    }
    .sousuokuang{
        padding: 10px;
        box-sizing: border-box;
        margin: 0 auto;
        text-align: center;
    }
    .sousuoInput{
        display: inline-block;
        margin: 10px;
    }
    .sousuoButton{
        display: inline-block;
    }
    .fenleilan{
        margin: 10px;
    }
    .shipin{
        width: 200px;display: inline-block;
        margin: 36px;
    }
    .shipinkuang:hover{
        box-shadow: 10px 10px 5px #c3c3c3;

    }
    .shipinkuang{
        /* background-color: aquamarine; */
        width: 200px;
        border: 1px solid#DCDFE6;
        border-radius: 5px;
        box-shadow: 10px 10px 5px #DCDFE6;;

    }
    .shipinkuang img{
        width: 200px;
        height: 120px;
        padding: 10px;
        box-sizing: border-box;
    }
    .shipinkuang a{
        margin-left: 10px;

    }
    .shipinkuang a:link{
        color: #303133;
    }
    .shipinkuang a:visited{
        color: #303133;
    }
    .shipinkuang a:hover{
        color: #409EFF;
    }
    .shipinkuang p{
        color: #303133;
        padding: 10px;
    }
    .aName a{
        display: inline-block;
        width: 180px;
        overflow: hidden;
        height: 20px;

    }
    .body-inner{
        /* width: 640px; */
        background: #fff;
        border-radius: 10px;
        /* height: 1000px; */
        overflow: auto;
    }
    .box-blog{
        width: 1200px;
        margin: 0 auto;


    }
    .content{
        width: 100%;
        height: 100%;
        background: #f5f6f7 !important;
    }
    .body-inner{
        width: 1240px;
        background: #fff;
        border-radius: 10px;
        height: 1000px;
        overflow: auto;
    }
    .box-blog{
        width: 1200px;
        margin: 0 auto;

    }
    ::-webkit-scrollbar {
        width:5px;

    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        border-radius:5px;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background: #e8eaf1;
    }
    .img-head{
        margin-top: 20px;
    }
    .blog{
        width: 1200px;
        height: 100px;
        overflow: hidden;
        padding: 20px;
        border-top: 1px solid #e8eaf1;


        transition: 1s;
    }
    .blog:hover{
        background-color: #f9f9f9;
    }
    .blog:last-child{
        border-bottom:  1px solid #e8eaf1;
    }
    .blog span{
        margin-bottom: 4px;
        color: #8a8a8a;
        font-size: 14px;
        line-height: 24px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
    }
    .blog a{
        max-width: 98%;
        color: #3d3d3d;
        display: block;
        line-height: 24px;
        height: 24px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-weight: bold;
    }
    .blog a:hover{
        color: #f40;
    }
    .ho span{
        cursor: pointer;
    }
    .ho span:hover{
        color: #f40 !important;
    }
    .up-blog{
        position: relative;
        border-bottom: 1px solid #e8eaf1;
        padding: 10px;
        margin-top: 5px;
    }
    .up-blog:last-child{
        border-bottom: none;
    }
    .up-blog .author{
        position: absolute;
        top: 8px;
    }
    .up-blog .author a{
        display: inline-block;
        margin-left: 60px;
        font-weight: bold;
        color: #3c3c3c;
    }
    .up-blog .author img{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;

    }
    .up-blog .author a:hover{
        color: #f40;
    }
    .up-blog .author .zan{
        position: absolute;
        left: 60px;
        height: 40px;
        font-size: 13px;
        color: #3c3c3c;
        line-height: 40px;
    }
    .zhibiao{
        display: inline-block;
        position: absolute;
        right: 10px;
    }
    .zhibiao span{

        height: 24px;
        text-align: right;
        font-size: 16px;
        font-weight: 600;
        color: #fc5531;
        line-height: 24px;
        position: relative;
        padding-right: 3px;
    }
    .zhibiao p{
        font-size: 12px;
        color: #999;
        line-height: 17px;
        text-align: right;
    }
    .inner-bou{
        height: 1000px;
    }

    .boxtaolun{
        margin-top: 10px;
    }
    .boxtaolun:hover{
        background-color: #f5f9f5;
    }
    .taolunName{
        margin-left: 10px;
        position: absolute;
    }
    .taolunName:hover{
        color: #62b038;
    }
    .taolun{
        font-size: 12px;
        color: rgba(45,181,93);
        background: rgba(45,181,93,0.15);
        height: 24px;
        line-height: 20px;
        padding: 2px 8px;
        border-radius: 12px;
        margin-right: 10px;
    }
    .tuijian{
        font-size: 12px;
        color: rgba(60,60,67,0.6);
        background: rgba(0,0,0,0.05);
        height: 30px;
        line-height: 20px;
        padding: 2px 8px;
        border-radius: 12px;
        margin-right: 10px;
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 791px;

    }
    .head2{
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre;
        margin-right: 10px;
        flex: 1 1 0%;
    }
    .inner-bou div{
        cursor: pointer;

    }
    .inner-bou .box{
        border-top: 1px solid rgba(240,240,240, 1);
    }
    .inner-bou .dec{
        font-size: 14px;
        line-height: 20px;
        color: rgba(60,60,67,0.6);
        -webkit-line-clamp: 2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin: 16px 0px 18px;
    }

</style>